<template>
  <view class="box">
    <view class="title">
      当前地点
    </view>

    <view class="box-cell">
      <u-cell-group :border='false'>
        <u-cell :border='false' :title="obj.point+obj.building+obj.room">
          <view slot='value' @click="onStutas">
            <view class="tab" v-if='obj.status===2'>审核通过</view>
            <view class="tab tablan" v-if='obj.status===1'>审核中</view>
            <view class="tab tabhong" v-if='obj.status===3'>审核失败</view>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="title">
      业主信息
    </view>


    <view class="box-cell">
      <u-cell-group :border="false">
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">姓名</text>
            <text class="u-cell-text2">{{obj.name}}</text>
          </view>
        </u-cell>
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">姓别</text>
            <text class="u-cell-text2">{{obj.gender?"男":'女'}}</text>
          </view>
        </u-cell>
        <u-cell :border='false'>
          <view slot="title" class="u-slot-title">
            <text class="u-cell-text">手机号</text>
            <text class="u-cell-text2">{{obj.mobile}}</text>
          </view>
        </u-cell>
      </u-cell-group>
    </view>

    <view class="box-cell2">
      <u-cell-group :border='false'>
        <u-cell :border='false' title="本人身份证照片">
        </u-cell>
      </u-cell-group>
      <view class="pic">
        <image :src="obj.idcardBackUrl" mode=""></image>
      </view>
      <view class="pic">
        <image :src="obj.idcardFrontUrl" mode=""></image>
      </view>
    </view>
    <life-button @click='goaddDetails' icon='../../static/icon/revise.png'>修改房屋信息</life-button>
  </view>
</template>

<script>
  import {
    getRoom
  } from "@/api/house.js"
  export default {
    onLoad({
      id
    }) {
      this.id = id
      this.getRoomoObj()
    },
    data() {
      return {
        id: null,
        obj: {}
      }
    },
    computed: {
      getName() {
        return this.$store.state.house.houseName
      }
    },
    methods: {
      // 修改状态
      onStutas() {

      },
      // 获取房屋信息
      async getRoomoObj() {
        const res = await getRoom(this.id)
        // console.log(res)
        this.obj = res.data
      },
      goaddDetails() {
        uni.navigateTo({
          url: '/pkg-house/add-details/add-details?id=' + this.id
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .box {
    height: 100%;
    background-color: #FAFAFA;
    padding-bottom: 500rpx;

    .title {
      padding: 0 30rpx;
      line-height: 86rpx;
      color: #979797;
      font-size: 24rpx;
    }

    .box-cell {
      background: #ffffff;
    }

    .box-cell2 {
      margin-top: 30rpx;
      padding: 0 30rpx 30rpx;
      background: #ffffff;

      .pic {
        height: 340rpx;
        margin-top: 20rpx;
        border-radius: 10rpx;
        background: #FAFAFA;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }

    ::v-deep .u-cell__body {
      background: #ffffff;
      height: 102rpx;
      // padding: 0;
      // margin: 0 15px;
      border-bottom: 1px solid #FAFAFA;
    }

    .tab {
      width: 128rpx;
      height: 48rpx;
      border-radius: 5px;
      background: #EBF8F0;
      color: #27AE60;
      font-size: 12px;
      line-height: 48rpx;
      text-align: center;
    }

    .tablan {
      background: #E5F0FB;
      color: #2D9CDB;

    }

    .tabhong {
      background: #FCF2ED;
      color: #EB5757;

    }

    .u-slot-title {
      display: flex;
    }

    .u-cell-text {
      width: 208rpx;
      display: block;
    }
  }
</style>
